<template name="commentItem">
	<view class="commentItem">
		<commentHeader class="width100" :close="close" :item="item" @commentLike="commentLike"></commentHeader>
		<view class="comment_content">
			<view class="comment_title" @click="go_details(item)">{{ item.content }}</view>
			<view v-if="item.files[0]" class="image_or_videos" @click="go_details(item)">
				<!-- 图片OR视频 and 九宫格 -->
				<singleMedia class="width100" v-if="item.files.length < 2" :isImage="item.files[0].file_type === 0" :file="item.files[0]" maxWidth="400" @playVideo="playVideo" />
				<mediaScratchableLatex class="width100" v-else :files="item.files" :margin="[5, 99.8, 200]" />
			</view>
		</view>
	</view>
</template>

<script>
import commentHeader from './commentHeader.vue';
import mediaScratchableLatex from '../mediaComponents/mediaScratchableLatex.vue';
import singleMedia from '../mediaComponents/singleMedia.vue';
export default {
	name: 'commentItem',
	props: ['item', 'index'],
	components: {
		commentHeader,
		mediaScratchableLatex,
		singleMedia
	},
	data() {
		return {};
	},
	methods: {
		commentLike(like_type) {
			this.$emit('commentLike', like_type, this.item.pk , this.index);
		}
	}
};
</script>

<style lang="scss">
.commentItem {
	background-color: white;
	width: calc(100% - 40rpx);
	flex-shrink: 0;
	flex-wrap: wrap;
	padding: 0 20rpx;
	margin: 5rpx 0;
}

.comment_content {
	width: 100%;
	align-items: center;
	flex-wrap: wrap;
	margin-left: 80rpx;
	margin-bottom: 10rpx;

	.comment_title {
		width: 100%;
		margin-bottom: 20rpx;
		flex-shrink: 0;
	}

	.image_or_videos {
		width: 100%;
		align-items: center;
		flex-wrap: wrap;
	}
}
</style>
